import React from 'react';
// import axios from 'axios';
import './index-con.css';
import { Carousel } from 'antd';
import { Row, Col } from 'antd';
import 'antd/dist/antd.css';
import Goods from '../goods/goods';
import banner1 from '../../images/qimgs/index/banner1-s.png';
import banner2 from '../../images/qimgs/index/banner2.jpg';
import banner3 from '../../images/qimgs/index/banner3.jpg';
import banner4 from '../../images/qimgs/index/banner4.jpg';
import pic1 from '../../images/qimgs/index/pic1.png';
import pic2 from '../../images/qimgs/index/pic2.png';
import pic3 from '../../images/qimgs/index/pic3.png';
import pic4 from '../../images/qimgs/index/pic4.png';
import pic5 from '../../images/qimgs/index/pic5.png';
import logo1 from '../../images/qimgs/index/logo1.png';
import logo2 from '../../images/qimgs/index/logo2.png';
import logo3 from '../../images/qimgs/index/logo3.png';
import logo4 from '../../images/qimgs/index/logo4.png';
import logo5 from '../../images/qimgs/index/logo5.png';
import logo6 from '../../images/qimgs/index/logo6.png';
import logo7 from '../../images/qimgs/index/logo7.png';
import logo8 from '../../images/qimgs/index/logo8.png';
import logo9 from '../../images/qimgs/index/logo9.png';
import logo10 from '../../images/qimgs/index/logo10.png';
import logo11 from '../../images/qimgs/index/logo11.png';
import logo12 from '../../images/qimgs/index/logo12.png';

import manhead from '../../images/qimgs/index/manhead.png';
import hotalhead from '../../images/qimgs/index/hotalhead.png';
import carhead from '../../images/qimgs/index/carhead.png';

import carpic1 from '../../images/qimgs/index/carpic1.png';
import carpic2 from '../../images/qimgs/index/carpic2.png';
import carpic3 from '../../images/qimgs/index/carpic3.png';
import carpic4 from '../../images/qimgs/index/carpic4.png';
import carpic5 from '../../images/qimgs/index/carpic5.png';
import carpic6 from '../../images/qimgs/index/carpic6.png';

// import manhead from '../../images/qimgs/index/manhead.png';
import manpic1 from '../../images/qimgs/index/manpic1.png';
import manpic2 from '../../images/qimgs/index/manpic2.png';
import manpic3 from '../../images/qimgs/index/manpic3.png';
import manpic4 from '../../images/qimgs/index/manpic4.png';
import manpic5 from '../../images/qimgs/index/manpic5.png';
import manpic6 from '../../images/qimgs/index/manpic6.png';

import hotelpic1 from '../../images/qimgs/index/hotelpic1.png';
import hotelpic2 from '../../images/qimgs/index/hotelpic2.png';
import hotelpic3 from '../../images/qimgs/index/hotelpic3.png';
import hotelpic4 from '../../images/qimgs/index/hotelpic4.png';
import hotelpic5 from '../../images/qimgs/index/hotelpic5.png';
import hotelpic6 from '../../images/qimgs/index/hotelpic6.png';

import jiancaipic1 from '../../images/qimgs/index/jiancaipic1.png';
import jiancaipic2 from '../../images/qimgs/index/jiancaipic2.png';
import jiancaipic3 from '../../images/qimgs/index/jiancaipic3.png';
import jiancaipic4 from '../../images/qimgs/index/jiancaipic4.png';
import jiancaipic5 from '../../images/qimgs/index/jiancaipic5.png';
import jiancaipic6 from '../../images/qimgs/index/jiancaipic6.png';

import jumei from '../../images/qimgs/index/jumei.png';
import tshirt from '../../images/qimgs/index/tshirt.png';
import womenhead from '../../images/qimgs/index/womenhead.png';
import jiancaihead from '../../images/qimgs/index/jiancaihead.png';
import jiancai from '../../images/qimgs/index/jiancai.png';

class IndexCon extends React.Component{
    constructor(props){
        super(props);
        this.state={
            logimg:[[logo1,logo2,logo3,logo4],[logo5,logo6,logo7,logo8],[logo9,logo10,logo11,logo12]],
            logimgobj:{
                headpic:[carhead,manhead,hotalhead],
                picarr:[[
                    {
                        img:carpic1,
                        tit:'同城汽车装饰中心',
                        name:'李杰',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                    {
                        img:carpic2,
                        tit:'同城汽车装饰中心',
                        name:'李连杰',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                    {
                        img:carpic3,
                        tit:'同城汽车装饰中心',
                        name:'张杰',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                ],[
                    {
                        img:carpic4,
                        tit:'同城汽车装饰中心',
                        name:'周杰',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                    {
                        img:carpic5,
                        tit:'同城汽车装饰中心',
                        name:'周杰伦',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                    {
                        img:carpic6,
                        tit:'同城汽车装饰中心',
                        name:'康杰',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                ]],
                manarr:[[
                    {
                        img:manpic1,
                        tit:'同城汽车装饰中心',
                        name:'李杰',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                    {
                        img:manpic2,
                        tit:'同城汽车装饰中心',
                        name:'李连杰',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                    {
                        img:manpic3,
                        tit:'同城汽车装饰中心',
                        name:'张杰',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                ],[
                    {
                        img:manpic4,
                        tit:'同城汽车装饰中心',
                        name:'李杰',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                    {
                        img:manpic5,
                        tit:'同城汽车装饰中心',
                        name:'李连杰',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                    {
                        img:manpic6,
                        tit:'同城汽车装饰中心',
                        name:'张杰',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                ]],
                lei:'汽车装饰',
                tab:['爆款推荐','精品女装','精品男装']
            },
            hotelobj:{
                headpic:[hotalhead,manhead,carhead],
                picarr:[[
                    {
                        img:hotelpic1,
                        tit:'三亚亚龙湾丽思卡尔顿酒店',
                        name:'李杰',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                    {
                        img:hotelpic2,
                        tit:'三亚亚龙湾丽思卡尔顿酒店',
                        name:'李连杰',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                    {
                        img:hotelpic3,
                        tit:'三亚亚龙湾丽思卡尔顿酒店',
                        name:'张杰',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                ],[
                    {
                        img:hotelpic4,
                        tit:'三亚亚龙湾丽思卡尔顿酒店',
                        name:'周杰',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                    {
                        img:hotelpic5,
                        tit:'三亚亚龙湾丽思卡尔顿酒店',
                        name:'周杰伦',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                    {
                        img:hotelpic6,
                        tit:'三亚亚龙湾丽思卡尔顿酒店',
                        name:'康杰',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                ]],
                manarr:[[
                    {
                        img:manpic1,
                        tit:'三亚亚龙湾丽思卡尔顿酒店',
                        name:'李杰',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                    {
                        img:manpic2,
                        tit:'三亚亚龙湾丽思卡尔顿酒店',
                        name:'李连杰',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                    {
                        img:manpic3,
                        tit:'三亚亚龙湾丽思卡尔顿酒店',
                        name:'张杰',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                ],[
                    {
                        img:manpic4,
                        tit:'三亚亚龙湾丽思卡尔顿酒店',
                        name:'李杰',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                    {
                        img:manpic5,
                        tit:'三亚亚龙湾丽思卡尔顿酒店',
                        name:'李连杰',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                    {
                        img:manpic6,
                        tit:'三亚亚龙湾丽思卡尔顿酒店',
                        name:'张杰',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                ]],
                lei:'精品酒店',
                tab:['爆款推荐','精品女装','精品男装']
            },
            shirtobj:{
                headpic:[manhead,hotalhead,carhead],
                picarr:[[
                    {
                        img:manpic1,
                        tit:'法曼斯fomoce男装',
                        name:'李杰',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                    {
                        img:manpic2,
                        tit:'法曼斯fomoce男装',
                        name:'李连杰',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                    {
                        img:manpic3,
                        tit:'法曼斯fomoce男装',
                        name:'张杰',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                ],[
                    {
                        img:manpic4,
                        tit:'法曼斯fomoce男装',
                        name:'周杰',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                    {
                        img:manpic5,
                        tit:'法曼斯fomoce男装',
                        name:'周杰伦',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                    {
                        img:manpic6,
                        tit:'法曼斯fomoce男装',
                        name:'康杰',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                ]],
                manarr:[[
                    {
                        img:hotelpic1,
                        tit:'三亚亚龙湾丽思卡尔顿酒店',
                        name:'李杰',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                    {
                        img:hotelpic2,
                        tit:'三亚亚龙湾丽思卡尔顿酒店',
                        name:'李连杰',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                    {
                        img:hotelpic3,
                        tit:'三亚亚龙湾丽思卡尔顿酒店',
                        name:'张杰',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                ],[
                    {
                        img:hotelpic4,
                        tit:'三亚亚龙湾丽思卡尔顿酒店',
                        name:'李杰',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                    {
                        img:hotelpic5,
                        tit:'三亚亚龙湾丽思卡尔顿酒店',
                        name:'李连杰',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                    {
                        img:hotelpic6,
                        tit:'三亚亚龙湾丽思卡尔顿酒店',
                        name:'张杰',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                ]],
                lei:'男装',
                tab:['爆款推荐','精品酒店','精品男装']
            },
            womenobj:{
                headpic:[jiancaihead,manhead,carhead],
                picarr:[[
                    {
                        img:jiancaipic1,
                        tit:'建筑家居饰装饰中心',
                        name:'李杰',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                    {
                        img:jiancaipic2,
                        tit:'建筑家居饰装饰中心',
                        name:'李连杰',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                    {
                        img:jiancaipic3,
                        tit:'建筑家居饰装饰中心',
                        name:'张杰',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                ],[
                    {
                        img:jiancaipic4,
                        tit:'建筑家居饰装饰中心',
                        name:'周杰',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                    {
                        img:jiancaipic5,
                        tit:'建筑家居饰装饰中心',
                        name:'周杰伦',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                    {
                        img:jiancaipic6,
                        tit:'建筑家居饰装饰中心',
                        name:'康杰',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                ]],
                manarr:[[
                    {
                        img:manpic1,
                        tit:'法曼斯fomoce男装',
                        name:'李杰',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                    {
                        img:manpic2,
                        tit:'法曼斯fomoce男装',
                        name:'李连杰',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                    {
                        img:manpic3,
                        tit:'法曼斯fomoce男装',
                        name:'张杰',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                ],[
                    {
                        img:manpic4,
                        tit:'法曼斯fomoce男装',
                        name:'李杰',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                    {
                        img:manpic5,
                        tit:'法曼斯fomoce男装',
                        name:'李连杰',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                    {
                        img:manpic6,
                        tit:'法曼斯fomoce男装',
                        name:'张杰',
                        phone:'18699563265',
                        address:'浙江省台州市温岭市人民西路281号'
                    },
                ]],
                lei:'建材',
                tab:['爆款推荐','精品男装','精品女装']
            }
        }
    };
    enter(e){
        e.target.style.borderColor = '#ec6a17';
    }
    leave(e){
        e.target.style.borderColor = '#ccc';
    }
    componentDidMount(){
        window.addEventListener('scroll', this.bindHandleScroll);
    }
    bindHandleScroll=(e)=>{
        const scrollTop = (e.srcElement ? e.srcElement.documentElement.scrollTop : false)  || window.pageYOffset || (e.srcElement ? e.srcElement.body.scrollTop : 0);
        if(scrollTop>=1200){
            // console.log(this)
            this.refs.louceng.style.display="block";
        }else{
            this.refs.louceng.style.display='none';
        }
    }
    componentWillUnmount(){
        window.removeEventListener('scroll', this.bindHandleScroll);
    }




    // componentWillMount(){
    //     axios.get('http://mobile.bwstudent.com/small/commodity/v1/commodityList?').then(res=>{
    //         console.log(res.data.result.mlss.commodityList[0]);
    //     })
    // }
    render(){
        return(
            <div id="indexCon">
                <div className="banner">
                    <Carousel autoplay>
                        <div><img src={banner1} alt=""/></div>
                        <div><img src={banner2} alt=""/></div>
                        <div><img src={banner3} alt=""/></div>
                        <div><img src={banner4} alt=""/></div>
                    </Carousel>
                </div>
                <div className="head-ad">
                    <Row>
                        <Col span={6}>
                            <img src={pic1} alt=""/>
                        </Col>
                        <Col span={6}>
                            <img src={pic2} alt=""/>
                        </Col>
                        <Col span={6}>
                            <img src={pic3} alt=""/>
                        </Col>
                        <Col span={6}>
                            <img src={pic4} alt=""/>
                        </Col>
                    </Row>
                </div>
                <div className="jingxuan">
                    <div className="jingxuan-head">
                        <span>精选</span>
                        <span>品牌</span>
                        <em>Brand selection</em>
                    </div>
                    <div className="jingxuan-con">
                        <img src={pic5} alt=""/>
                        <div className="jingxuan-logo">{
                            this.state.logimg.map((item,i)=>{
                                return  <ul key={i}><li>{
                                    item.map((item1,j)=>{
                                        return <img key={j} onMouseEnter={this.enter.bind(this)} onMouseLeave={this.leave.bind(this)} src={item1} alt=""/>
                                    })
                                }
                                </li></ul>
                            })
                        } 
                        </div>
                    </div>
                </div>
                <a name="yilou">
                    <div className="first-car">
                        <Goods msg={this.state.logimgobj}></Goods>
                    </div>
                </a>
                <img src={jumei} alt=""/>
                <a name="erlou">
                    <div className="first-car">
                        <Goods msg={this.state.hotelobj}></Goods>
                    </div>
                </a>
                <img src={tshirt} alt=""/>
                <a name="sanlou">
                    <div className="first-car">
                        <Goods msg={this.state.shirtobj}></Goods>
                    </div>
                </a>
                <img src={womenhead} alt=""/>
                <a name="silou">
                    <div className="first-car">
                        <Goods msg={this.state.womenobj}></Goods>
                    </div>
                </a>
                <img src={tshirt} alt=""/>
                <a name="wulou">
                    <div className="first-car">
                        <Goods msg={this.state.shirtobj}></Goods>
                    </div>
                </a>
                <img src={jiancai} alt=""/>
                <a name="liulou">
                    <div className="first-car">
                        <Goods msg={this.state.womenobj}></Goods>
                    </div>
                </a>
                <img src={jumei} alt=""/>
                <a name="qilou">
                    <div className="first-car">
                        <Goods msg={this.state.hotelobj}></Goods>
                    </div>
                </a>
                <img src={tshirt} alt=""/>
                <a name="balou">
                    <div className="first-car">
                        <Goods msg={this.state.shirtobj}></Goods>
                    </div>
                </a>
                <img src={jiancai} alt=""/>
                <a name="jiulou">
                    <div className="first-car">
                        <Goods msg={this.state.womenobj}></Goods>
                    </div>
                </a>
                <img src={jumei} alt=""/>
                <a name="shilou">
                    <div className="first-car">
                        <Goods msg={this.state.hotelobj}></Goods>
                    </div>
                </a>
                <img src={tshirt} alt=""/>
                <a name="shiyilou">
                    <div className="first-car">
                        <Goods msg={this.state.shirtobj}></Goods>
                    </div>
                </a>
                <img src={jiancai} alt=""/>
                <a name="shierlou">
                    <div className="first-car">
                        <Goods msg={this.state.womenobj}></Goods>
                    </div>
                </a>
                <img src={jumei} alt=""/>
                <a name="shisanlou">
                    <div className="first-car">
                        <Goods msg={this.state.hotelobj}></Goods>
                    </div>
                </a>
                <img src={jiancai} alt=""/>
                <div className="louceng" ref="louceng">
                    <ul>
                        <li>
                            <a href="#yilou">
                                <p>1 F</p>
                                <p>汽车装饰</p>
                            </a>
                        </li>
                        <li>
                            <a href="#erlou">
                                <p>2 F</p>
                                <p>精品酒店</p>
                            </a>
                        </li>
                        <li>
                            <a href="#sanlou">
                                <p>3 F</p>
                                <p>男装</p>
                            </a>
                        </li>
                        <li>
                            <a href="#silou">
                                <p>4 F</p>
                                <p>建材</p>
                            </a>
                        </li>
                        <li>
                            <a href="#wulou">
                                <p>5 F</p>
                                <p>男装</p>
                            </a>
                        </li>
                        <li>
                            <a href="#liulou">
                                <p>6 F</p>
                                <p>建材</p>
                            </a>
                        </li>
                        <li>
                            <a href="#qilou">
                                <p>7 F</p>
                                <p>精品酒店</p>
                            </a>
                        </li>
                        <li>
                            <a href="#balou">
                                <p>8 F</p>
                                <p>男装</p>
                            </a>
                        </li>
                        <li>
                            <a href="#jiulou">
                                <p>9 F</p>
                                <p>建材</p>
                            </a>
                        </li>
                        <li>
                            <a href="#shilou">
                                <p>10 F</p>
                                <p>精品酒店</p>
                            </a>
                        </li>
                        <li>
                            <a href="#shiyilou">
                                <p>11 F</p>
                                <p>男装</p>
                            </a>
                        </li>
                        <li>
                            <a href="#shierlou">
                                <p>12 F</p>
                                <p>建材</p>
                            </a>
                        </li>
                        <li>
                            <a href="#shisanlou">
                                <p>13 F</p>
                                <p>精品酒店</p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        );
    }
}

export default IndexCon;